<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- css -->
    <!-- <link rel="stylesheet" href="index.css"> -->
    <style>
        *{padding: 0;margin: 0;}
        .header{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            background-color: #ccc;
        }
        .header div{
            float: right;
        }
        .content{
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            background-color: #999;
        }
        .content-wrap{
            background-color: #f00;
        }
    </style>
</head>
<body>
    <!-- html -->
    <!-- <div class="header">
        <img src="images/cart.png" alt="">
        <div>
            <a href="">首页</a>
            <a href="">新闻</a>
            <a href="">购物车</a>
        </div>
    </div>
    <div class="content-wrap">
        <div class="content">

        </div>
    </div> -->
    <input type="text">+
    <input type="text">=
    <input type="text">
    <div id="result">12</div>
    <button id="sum">求和</button>
    <div id="error" style="display: none;">您输入的内容不是数字</div>
    <script>
        // JavaScript: 
            // ECMAscript  
            // BOM(setInterval、setTimeout)  
            // DOM
        // DOM操作
            // 一、样式处理(包括动画-margin、left)
            // 二、节点操作：节点的添加、删除createElement+appendChild
            // 三、内容处理：innerHTML

        // 1、获取元素
        var btn = document.getElementById('sum');
        var error = document.getElementById('error');
        var inputs = document.getElementsByTagName('input')
        // 2、绑定事件
        inputs[0].onblur = function(){
            // isNaN()
            // if(isNaN(Number(inputs[0].value))){}
            if(!Number(inputs[0].value)){
                error.style.display = 'block';
                setTimeout(function(){
                    error.style.display = 'none';
                },2000)
            }
        }
        btn.onclick = function(){
            var sum = Number(inputs[0].value) + Number(inputs[1].value)
            inputs[2].value = sum;
            document.getElementById('result').innerHTML = sum;
        }
    </script>
    <!-- <script src="index.js"></script> -->
</body>
</html>